<template>
  <div class="resizable-panel" :style="panelStyle">
    <div class="panel-header" @mousedown="startDrag">
      <span class="title">{{ title }}</span>
      <div class="header-buttons">
        <button class="minimize-btn" @click="toggleMinimize">
          {{ isMinimized ? '□' : '--' }}
        </button>
        <button class="close-btn" @click="emitClose">×</button>
      </div>
    </div>

    <transition name="slide">
      <div class="panel-content" v-show="!isMinimized">
        <slot></slot>
      </div>
    </transition>


  </div>
</template>

<script setup lang="ts">
import { computed, onMounted, onUnmounted, ref } from 'vue'

interface Position {
  x: number
  y: number
}

const props = defineProps({
  width: { type: Number, default: 300 },
  height: { type: Number, default: 400 },
  title: { type: String, default: 'Panel' },
  initialPosition: { type: Object as () => Position, default: () => ({ x: 100, y: 100 }) }
})

const emit = defineEmits(['close', 'update:width', 'update:height'])

const position = ref<Position>(props.initialPosition)
const isDragging = ref(false)
const startPos = ref<Position>({ x: 0, y: 0 })
const isMinimized = ref(false)
const isResizing = ref(false)
const resizeDirection = ref('')
const startSize = ref({ width: props.width, height: props.height })

const panelStyle = computed(() => ({
  width: isMinimized.value ? '300px' : `${props.width}px`,
  height: isMinimized.value ? '45px' : `${props.height}px`,
  left: `${position.value.x}px`,
  top: `${position.value.y}px`,
  zIndex: 1000
}))

const startDrag = (e: MouseEvent) => {
  e.preventDefault()
  isDragging.value = true
  startPos.value = {
    x: e.clientX - position.value.x,
    y: e.clientY - position.value.y
  }
}

const onDrag = (e: MouseEvent) => {
  if (!isDragging.value) return
  position.value = {
    x: e.clientX - startPos.value.x,
    y: e.clientY - startPos.value.y
  }
}

const stopDrag = () => {
  isDragging.value = false
}


const onResize = (e: MouseEvent) => {
  if (!isResizing.value) return

  const deltaX = e.clientX - startPos.value.x
  const deltaY = e.clientY - startPos.value.y

  switch (resizeDirection.value) {
    case 'top':
      emit('update:height', Math.max(100, startSize.value.height - deltaY))
      position.value.y += deltaY
      break
    case 'right':
      emit('update:width', Math.max(200, startSize.value.width + deltaX))
      break
    case 'bottom':
      emit('update:height', Math.max(100, startSize.value.height + deltaY))
      break
    case 'left':
      emit('update:width', Math.max(200, startSize.value.width - deltaX))
      position.value.x += deltaX
      break
  }

  startPos.value = { x: e.clientX, y: e.clientY }
}

const stopResize = () => {
  isResizing.value = false
}

onMounted(() => {
  document.addEventListener('mousemove', (e) => {
    if (isDragging.value) onDrag(e)
    if (isResizing.value) onResize(e)
  })
  document.addEventListener('mouseup', () => {
    if (isDragging.value) stopDrag()
    if (isResizing.value) stopResize()
  })
})

onUnmounted(() => {
  document.removeEventListener('mousemove', onDrag)
  document.removeEventListener('mouseup', stopDrag)
})

const toggleMinimize = () => {
  isMinimized.value = !isMinimized.value
}

const emitClose = () => {
  emit('close')
}
</script>

<style scoped>
.resizable-panel {
  position: fixed;
  background: white;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: height 0.3s ease, width 0.3s ease;
}

.panel-header {
  box-sizing: border-box;
  height: 45px;
  background: #1890ff;
  color: white;
  padding: 8px 12px;
  cursor: move;
  display: flex;
  justify-content: space-between;
  align-items: center;
  user-select: none;
}

.panel-content {
  box-sizing: border-box;
  flex: 1;
  padding: 12px;
  overflow: auto;
}

.resize-handle {
  position: absolute;
  background: transparent;
  z-index: 10;
}

.resize-handle.top {
  top: 0;
  height: 4px;
  cursor: ns-resize;
  width: 100%;
}

.resize-handle.right {
  right: 0;
  width: 4px;
  cursor: ew-resize;
  height: 100%;
}

.resize-handle.bottom {
  bottom: 0;
  height: 4px;
  cursor: ns-resize;
  width: 100%;
}

.resize-handle.left {
  left: 0;
  width: 4px;
  cursor: ew-resize;
  height: 100%;
}

.header-buttons {
  height: 100%;
}

.header-buttons button {
  width: 50px;
  height: 100%;
  background: transparent;
  border: none;
  color: white;
  cursor: pointer;
  font-size: 16px;
  margin-left: 8px;
  padding: 0 4px;
  box-sizing: border-box;
}

.header-buttons button:hover {
  background: rgba(255, 255, 255, 0.2);
}



.slide-enter-active,
.slide-leave-active {
  transition: all 0.3s ease;
  max-height: 1000px;
}

.slide-enter-from,
.slide-leave-to {
  opacity: 0;
  max-height: 0;
  padding: 0;
}
</style>
